<template>
<div class="news-detail">

  <!-- <Header :bgcolor="'rgba(0,0,0,.8)'" /> -->

  <div class="module-show margin-xauto">
    <!-- 面包线标题 -->
    <div class="news-title">
      <span class="hand" @click="jump(1)">新闻资讯</span>
      <span class="mgl5 fc-b1">--</span>
      <span class="mgl5 hand" @click="jump(2)">{{model.type_text}}</span>
      <span class="mgl5 fc-b1">--</span>
      <span class="mgl5 fc-b1">{{model.title}}</span>
    </div>

    <!-- 详情 -->
    <div class="news-content min-h300">
      <div class="news-content-title">{{model.title}}</div>
      <!-- 详情内容 -->
      <div v-html="model.content"></div>
      <!-- 日期 点赞数 -->
      <div class="news-content-date flex pd2 jc-between">
        <div class="fs-n fc-b3">{{model.created && model.created.slice(0,10)}}</div>
        <div class="fs-n fc-b3">{{model.seecount}}人阅读 - {{model.praisecount}}人点赞</div>
      </div>
      <!-- 点赞按钮 -->
      <div class="news-content-praise flex jc-center">
        <div class="news-content-praise-left" v-if="!isPraise">
          <i class="iconfont icon-qinziAPPtubiao- fc-b3 hand" @click="handlePraise"></i>
          <p class="tac omit mgt2 fc-b3">点个赞呗！</p>
        </div>
        <div class="news-content-praise-right" v-if="isPraise">
          <i class="iconfont icon-qinziAPPtubiao- danger"></i>
          <p class="tac omit mgt2 fc-b3">{{model.praisecount}}人觉得很赞</p>
        </div>
      </div>
    </div>

    <!-- 更多内容 -->
    <div class="new-more min-h300">
      <h2 class="fc-b1 fs-b">更多内容</h2>
      <InfoList :list="list" v-if="list.length>0" />
      <div class="null tac" v-else>暂无数据</div>
    </div>
  </div>
  
  <Aside />

  <Footer />

</div>
</template>

<script>
export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    InfoList: _ => import('@/components/common/InfoList'),
    Aside: _ => import('@/components/common/Aside'),
  },
  data() {
    return {
      opts: {
        pageIndex: 1,
        pageSize: 5,
        typeId: '',
      },
      list: [],
      model: {},
      isPraise: false,
    }
  },
  methods: {
    // 获取更多内容列表
    getList() {
      this.$api.getInfoList(this.opts).then(res => {
        // console.log(res)
        if (res.code == 100) {
          if (res.data && res.data.list && res.data.list.length > 0) {
            // 过滤自己
            let list = res.data.list.filter(item => item.id != this.$route.params.id)
            this.list = list.slice(0, 4)
          } else {
            this.list = []
          }
        }
      })
    },
    // 详情页
    getDetail(id) {
      this.$api.getInfoDetailData(id).then(res => {
        // console.log(res)
        if (res.code == 100) {
          this.model = res.data
          this.opts.typeId = res.data.type_id
          this.getList()
        }
      })
    },
    jump(val) {
      if (val == 2) {
        this.$router.push({name: 'news', query: {t: this.model.type_id}})
      } else {
        this.$router.push({name: 'news'})
      }
    },
    // 点赞
    handlePraise() {
      console.log('点赞')
      this.$api.praiseInfoDetail(this.$route.params.id).then(res => {
        if (res.code == 100) {
          this.model.praisecount = this.model.praisecount + 1
          this.isPraise = true
        }
      })
    },
    // 回到顶部
    backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      // if (that.scrollTop > 60) {
      //   that.btnFlag = true
      // } else {
      //   that.btnFlag = false
      // }
    },
  },
  watch: {
    '$route.params.id': {
      handler(val) {
        console.log(val)
        this.getDetail(val)
        this.backTop()
      },
    }
  },
  created() {
    // console.log(this.$route.params)
    if (this.$route.params && this.$route.params.id) {
      this.getDetail(this.$route.params.id)
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
}
</script>

<style lang="stylus" scoped>
.news-detail
  width 100%
  min-width 1200px
  .module-show
    width 1200px
  .news-title
    margin-top 80px
    margin-bottom 20px
  .news-content
    border 1px solid #eeeeee
    padding 50px 150px
    margin-bottom 20px
    .news-content-title
      margin-bottom 20px
      line-height 40px
      color rgba(51, 51, 51, 1)
      font-weight 600
      font-size 28px
    .news-content-date
      border-top 1px solid #eeeeee
      margin-top 50px
      margin-bottom 20px
    .news-content-praise
      .news-content-praise-left
        margin-right 30px
      i.icon-qinziAPPtubiao-
        display block
        width 100px
        border 1px solid #eee
        height 100px
        border-radius 50%
        text-align center
        line-height 100px
        font-size 40px
  .new-more
    border 1px solid #eeeeee
    padding 20px 10px
    margin-bottom 50px
</style>
<style lang="stylus">
.news-detail
  .news-content
    img
      max-width 100%
</style>
